<!--
author:        hejy <silentmanager@163.com>
date:          2024-11-01 00:36:20
component:     index
Copyright © YourCompanyName All rights reserved
用户管理
-->
<template>
  <div>
    <FormComponent
      :config="formConfig"
      :initialValues="initialValues"
      :rules="rules"
      @submit="handleFormSubmit"
    >
      <template #submit>
        <!-- 自定义提交和重置按钮 -->
        <el-button type="success" @click="handleCustomSubmit">搜索</el-button>
        <el-button type="warning" @click="handleReset">重置</el-button>
      </template>
    </FormComponent>

    <!-- 表格 -->
    <el-card style="margin-top: 24px">
      <el-alert :title="'已选择 ' + selectedCount + ' 项'" type="success" />
      <el-table
        @selection-change="handleSelectionChange"
        :data="currentTableData"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column label="账号" prop="account" />
        <el-table-column label="用户名称" prop="userName" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="所属组织" prop="organization" />
        <el-table-column label="职位" prop="position" />
        <el-table-column label="状态" prop="status" />
        <el-table-column label="是否绑定了微信" prop="isWeChatBound" />
        <el-table-column label="公海池申请权限" prop="publicPoolPermission" />
        <el-table-column label="分公司申请权限" prop="branchPermission" />
        <el-table-column label="最近操作时间" prop="lastOperationTime" />
        <el-table-column label="创建时间" prop="creationTime" />
        <el-table-column label="操作" prop="actions" />
      </el-table>
      <el-pagination
        style="margin-top: 12px"
        background
        layout="total, prev, pager, next, sizes"
        :total="tableData.length"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        v-model:current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { userTableDataconst } from '@/mock'
// --------------------  表格  ---------------------
// 数据
const tableData = ref(userTableDataconst)
// 定义选中项数量的状态
const selectedCount = ref(0)
// 处理选择变化的函数
const handleSelectionChange = (selection: any[]) => {
  selectedCount.value = selection.length // 更新选中项的数量
}
const currentPage = ref(1)
const pageSize = ref(5)
// 计算当前页的数据
const currentTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 切换分页大小时，重置到第一页
}
const handlePageChange = (newPage) => {
  currentPage.value = newPage
}
// ==================== 表单  ====================

const formConfig = [
  {
    label: '账户名称',
    prop: 'username',
    type: 'input',
    options: { placeholder: '请输入账户名称' }
  },
  {
    label: '用户名称',
    prop: 'username',
    type: 'input',
    options: { placeholder: '请输入用户名称' }
  },
  {
    label: '手机号',
    prop: 'username',
    type: 'input',
    options: { placeholder: '请输入手机号' }
  },
  {
    label: '所属组织',
    prop: 'username',
    type: 'select',
    options: {
      placeholder: '请选择所属组织',
      style: 'width: 240px',
      options: [
        { label: '所属组织1', value: '1' },
        { label: '所属组织2', value: '2' },
        { label: '所属组织3', value: '3' }
      ]
    }
  },
  {
    label: '状态',
    prop: 'username',
    type: 'select',
    options: {
      placeholder: '请选择状态',
      style: 'width: 240px',
      options: [
        { label: '全部', value: '1' },
        { label: '正常', value: '2' },
        { label: '锁定', value: '3' },
        { label: '冻结', value: '3' },
        { label: '待审核', value: '3' },
        { label: '黑名单', value: '3' }
      ]
    }
  },
  {
    label: '职位',
    prop: 'username',
    type: 'select',
    options: {
      placeholder: '请选择职位',
      style: 'width: 240px',
      options: [
        { label: '全部', value: '1' },
        { label: '总监', value: '1' },
        { label: '总经理', value: '1' },
        { label: '部门经理', value: '1' },
        { label: '部门副经理', value: '1' },
        { label: '财务', value: '1' },
        { label: '行政', value: '1' },
        { label: '人事', value: '2' }
      ]
    }
  }
]

const initialValues = {
  username: '',
  age: null,
  gender: '',
  birthDate: ''
}

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  age: [{ type: 'number', required: true, message: '请输入年龄', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  birthDate: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }]
}

const handleFormSubmit = (formData: any) => {
  console.log('提交表单数据:', formData)
}

const handleCustomSubmit = () => {
  console.log('自定义提交逻辑')
  // 自定义提交逻辑
}

const handleReset = () => {
  console.log('自定义重置逻辑')
  // 自定义重置逻辑
}
</script>
